<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.red{
				height: 150px;
				background-color: blueviolet;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--
			<div class="red" v-on:click.capture="divclick">
				capture 实现捕获触发事件的机制
				<input type="button"  value="按钮" @click="btnclick"/>
			</div>
			-->
			
			
			<!--<div class="red" v-on:click="divclick">
				<input type="button"  value="按钮" @click.stop="btnclick"/>
				.stop阻止事件冒泡
			</div>-->
			
			<!--<div class="red" v-on:click="divclick">
				<input type="button"  value="按钮" @click.self="btnclick"/>
				.self 实现只有点击当前元素，才会触发事件
			</div>-->
			
			
			<div class="red" v-on:click.capture="divclick">
				<!--.capture 实现捕获触发事件的机制-->
				<input type="button"  value="按钮" @click.stop="btnclick"/>
				<!--.stop阻止事件冒泡-->
			</div>
			<a href="http://www.baidu.com" @click.prevent.once="linkclick">go百度</a>
			<!--.prevent 阻止默认行为-->
			<!--.once 只触发一次-->
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					divclick:function(){
						console.log("div被点击")
					},
					btnclick:function(){
						console.log("btn被点击")
					},
					linkclick:function(){
					console.log("a被点击")
					}
				}
			});
		</script>
	</body>
</html>
